<script type="text/javascript"
        src="${siteurl}plugins/webuploader/webuploader.js"></script>
<link rel="stylesheet" type="text/css" href="${siteurl}plugins/webuploader/webuploader.css">

[#macro fileinput name image=""]
<input type="hidden" name="${name}"  id="${name}id" value="${image!''}">
<div   style="width: 100px;display: inline-block;">
    <div style="max-width: 100px;" id="${name}list" class="uploader-list">
        [#if image?? && image?length>1 ]
        <div id="WU_FILE_10000" class="file-item thumbnail upload-state-done">
            <img src="${siteurl}${image}">
        </div>
        [/#if]

    </div>
    <div id="${name}filepicker" style="left: 10px">选择文件
    </div>
</div>



<script type="text/javascript">

    var ${name}filepickerobj = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto : true,

        // swf文件路径
        swf : '${siteurl}assets/plugs/webuploader/Uploader.swf',

        // 文件接收服务端。
        server : '${siteurl}admin/file/upload.htm?fileType=file',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick : '#${name}filepicker'

    });

    ${name}filepickerobj.on('fileQueued', function(file) {
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1;

        // 缩略图大小
        thumbnailWidth = 100 * ratio;
        thumbnailHeight = 100 * ratio;

        $list = $('#${name}list');
        $list.empty();
        //$btn = $('#ctlBtn');
        var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>');
        $img = $li.find('img');

        // $list为容器jQuery实例
        $list.append($li);

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        ${name}filepickerobj.makeThumb(file, function(error, src) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr('src', src);
        }, thumbnailWidth, thumbnailHeight);

        // 文件上传过程中创建进度条实时显示。
        ${name}filepickerobj.on('uploadProgress', function(file, percentage) {
            var $li = $('#' + file.id), $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        ${name}filepickerobj.on('uploadSuccess', function(file) {
            $('#' + file.id).addClass('upload-state-done');
        });

        // 文件上传失败，现实上传出错。
        ${name}filepickerobj.on('uploadError', function(file) {
            var $li = $('#' + file.id), $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        ${name}filepickerobj.on('uploadComplete', function(file) {
            $('#' + file.id).find('.progress').remove();
        });

        ${name}filepickerobj.on('uploadAccept', function(file, response) {

            if (response.code == 0) {
                // 通过return false来告诉组件，此文件上传有错。
                $("#${name}id").val(response.url);
                //alert(response.url);
            } else {
                //alert(response.url);
            }
        });
    });

</script>
[/#macro]


[#macro fileinputlist name image=""]
<input type="hidden" name="${name}"  id="${name}id" value="${image!''}">
<div   style="width: 100px;display: inline-block;">
    <div style="max-width: 100px;" id="${name}list" class="uploader-list">
        [#if image?? && image?length>1 ]
        <div id="WU_FILE_0" class="file-item thumbnail upload-state-done">
            <img src="${siteurl}${image}">
        </div>
        [/#if]

    </div>
    <div id="${name}filepicker" style="left: 10px">选择文件
    </div>
</div>



<script type="text/javascript">

    var ${name}filepickerobj = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto : true,

        // swf文件路径
        swf : '${siteurl}assets/plugs/webuploader/Uploader.swf',

        // 文件接收服务端。
        server : '${siteurl}admin/file/upload.htm?fileType=file',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick : '#${name}filepicker'

    });

    ${name}filepickerobj.on('fileQueued', function(file) {
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1;

        // 缩略图大小
        thumbnailWidth = 100 * ratio;
        thumbnailHeight = 100 * ratio;

        $list = $('#${name}list');
        $list.empty();
        //$btn = $('#ctlBtn');
        var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>');
        $img = $li.find('img');

        // $list为容器jQuery实例
        $list.append($li);

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        ${name}filepickerobj.makeThumb(file, function(error, src) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr('src', src);
        }, thumbnailWidth, thumbnailHeight);

        // 文件上传过程中创建进度条实时显示。
        ${name}filepickerobj.on('uploadProgress', function(file, percentage) {
            var $li = $('#' + file.id), $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        ${name}filepickerobj.on('uploadSuccess', function(file) {
            $('#' + file.id).addClass('upload-state-done');
        });

        // 文件上传失败，现实上传出错。
        ${name}filepickerobj.on('uploadError', function(file) {
            var $li = $('#' + file.id), $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        ${name}filepickerobj.on('uploadComplete', function(file) {
            $('#' + file.id).find('.progress').remove();
        });

        ${name}filepickerobj.on('uploadAccept', function(file, response) {

            if (response.message.type == "success") {
                // 通过return false来告诉组件，此文件上传有错。
                $("#${name}id").val(response.url);
                //alert(response.url);
            } else {
                //alert(response.url);
            }
        });
    });

</script>
[/#macro]


[#macro imageinput name image=""]
<input type="hidden" name="${name}"  id="${name}id" value="${image!''}">
<div   style="width: 100px;display: inline-block;">
    <div style="max-width: 100px;" id="${name}list" class="uploader-list">
        [#if image?? && image?length>1 ]
        <div id="WU_FILE_10000" class="file-item thumbnail upload-state-done">
            <img src="${siteurl}${image}">
        </div>
        [/#if]

    </div>
    <div id="${name}filepicker" style="left: 10px">选择图片
    </div>
</div>

<script type="text/javascript">

    var ${name}filepickerobj = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto : true,

        // swf文件路径
        swf : '${siteurl}assets/plugs/webuploader/Uploader.swf',

        // 文件接收服务端。
        server : '${siteurl}admin/file/upload.htm',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick : '#${name}filepicker',

        // 只允许选择图片文件。
        accept : {
            title : 'Images',
            extensions : 'gif,jpg,jpeg,bmp,png',
            mimeTypes : 'image/*'
        }
    });

    ${name}filepickerobj.on('fileQueued', function(file) {
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1;

        // 缩略图大小
        thumbnailWidth = 100 * ratio;
        thumbnailHeight = 100 * ratio;

        $list = $('#${name}list');
        $list.empty();
        //$btn = $('#ctlBtn');
        var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>'), $img = $li.find('img');

        // $list为容器jQuery实例
        $list.append($li);

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        ${name}filepickerobj.makeThumb(file, function(error, src) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr('src', src);
        }, thumbnailWidth, thumbnailHeight);

        // 文件上传过程中创建进度条实时显示。
        ${name}filepickerobj.on('uploadProgress', function(file, percentage) {
            var $li = $('#' + file.id), $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        ${name}filepickerobj.on('uploadSuccess', function(file) {
            $('#' + file.id).addClass('upload-state-done');
        });

        // 文件上传失败，现实上传出错。
        ${name}filepickerobj.on('uploadError', function(file) {
            var $li = $('#' + file.id), $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        ${name}filepickerobj.on('uploadComplete', function(file) {
            $('#' + file.id).find('.progress').remove();
        });

        ${name}filepickerobj.on('uploadAccept', function(file, response) {

            if (response.message.type == "success") {
                // 通过return false来告诉组件，此文件上传有错。
                $("#${name}id").val(response.url);
                //alert(response.url);
            } else {
                //alert(response.url);
            }
        });
    });

</script>
[/#macro]
